<template>
    <div class="flex-main">
        <div class="flex-body">
            <detail-slider></detail-slider>
            
            <div class="m-proTitle mb">
                <p>{{spelling.ProjectName}}</p>
                <div>
                    <b>&yen;{{spelling.Price}}</b> 
                   <p>已拼成{{spelling.HasSpellingNum}}件</p>
                </div>
            </div>
            <div class="m-disbox mb" v-if="spelling.list!=''">
                <div class="m-dis mb">
                    <span>{{spelling.PepoleNum}}人在拼单，可直接参与拼团</span>
                    <em class="m-more" @click="showMoreCollege">查看全部</em>
                </div>
                <div v-for="(item,index) in spelling.list" :key="index">
                    <college-item v-if="index<4" :collagelist="item"></college-item>
                </div>
                
            </div>

            <div class="m-detail">
                <p class="m-title mb">商品详情</p>
                <div v-html="spelling.Content"></div>
            </div>
        </div>
        <div class="flex-bottom">
            <div class="m-detail-bottom">
                <div class="m-cart" @click="buySelf">
                    <p>&yen;{{spelling.OriginalPrice}}</p>
                    单独购买
                </div>
                <div class="m-buy" @click="showSpecBtn(spelling.id)">
                    <p>&yen;{{spelling.Price}}</p>
                    发起拼团
                </div>
            </div>
        </div>
        
        
        <!-- 更多拼单 -->
        <more-college v-if="isShowMore" @closeMore="closeMore"></more-college>
        <!-- 单独购买 弹出层 -->
        <pay-type v-if="isShowPaytype" @closePaytype="closePaytype" :CardClassId="spelling.ProjectId" :price="spelling.OriginalPrice"></pay-type>
        
    </div>
</template>
<script>
import {spellingDetail} from '@/api/spelling';
export default {
    name:'',
    data () {
        return {
            showSpec:false,
            num:1,
            isShowMore:false,       //是否显示更多拼单
            isShowPaytype:false,        //选择付款方式
            spelling:'',            //拼团详情
        }
    },
    components: {
        detailSlider:()=>import('@/model/projectDetail/detailSlider'),
        evaluetionItem:()=>import('@/model/evaluetion/evaluetionItem'),
        collegeItem:()=>import('@/model/spelling/collegeItem'),
        moreCollege:()=>import('@/model/spelling/moreCollege'),
        payType:()=>import('@/model/payType/payType'),
    },
    methods: {
        // 获取拼团详情
        getDetail(id) {
            let that = this;
            spellingDetail({id:id}).then(result=>{
                that.spelling = result.detail;
                this.$indicator.close();
            })
        },
        // 查看更多拼单
        showMoreCollege() {
            this.isShowMore = true;
        },
        // 关闭更多拼单层
        closeMore() {
            this.isShowMore = false;
        },
        // 单独购买事件
        buySelf() {
            this.$messagebox.confirm('项目名称','确定购买').then((action) => {
                this.isShowPaytype = true;
            }).catch((err) => {
                
            });
            
        },
        // 关闭单独购买选择付款方式
        closePaytype() {
            this.isShowPaytype = false;
        },
        // 数量减少
        minusNum () {
            let num = this.num;
            if(num<2){
                this.$toast('不能再少啦~')
            }else{
                num --;
            }
            this.num = num;
        },
        // 数量增加
        addNum () {
            let num = this.num;
            num ++;
            this.num = num;
        },
        // 发起拼团
        showSpecBtn(id) {
            this.$router.push({name:'spellingPayment',query:{spellingid:id}});
        },
        // 关闭选择规格层
        closeSpec() {
            this.showSpec = false;
        }
    },
    mounted() {
        this.$indicator.open('加载中...');
        let id = this.$route.query.id;
        this.getDetail(id);
    }
}
</script>
<style lang="less" scoped src="@/less/spelling/spellingDetail.less"></style>
